<template>
  <view>
    <nav-bar title="个人中心" :showLeftIcon="false"></nav-bar>
    <scroll-view scroll-y  :style="{ height: scrollHeight }">
      <view class="top-info">
        <view class="info-box">
          <view class="user-img" @click="clickEditInfo">
            <image
              class="head-img"
              :src="userInfo.userPhoto ? 
                (userInfo.userPhoto.includes('http') ? userInfo.userPhoto : baseUrl + userInfo.userPhoto)
                : ''"
              mode="aspectFill" />
          </view>
          <view class="user-info">
            <view class="name-box">
              <view class="user-name" @click="clickEditInfo">{{ userInfo.userName || '暂未登录' }}</view>
              <view class="identity">
                <image
                  class="identity-img"
                  :src="baseIconUrl + '/userIcon/icon_user' + (userInfo.isVipmember === 2 ? '3.png' : (userInfo.isMember === 2 ? '2.png' : '1.png'))"
                  :style="{ width: userInfo.isVipmember === 2 ? '114rpx' : (userInfo.isMember === 2 ? '140rpx' : '104rpx') }"
                  mode="aspectFill"
                />
              </view>
            </view>
            <view class="user-id">{{ userInfo.phoneNumber }}</view>
          </view>
        </view>
        <view class="vip-box">
          <view class="common-item" @click="memberClick">
            <view class="left-info">
              <view class="common-title">会员权益</view>
              <view class="more-btn">查看更多权益<uni-icons type="right" size="12" color="#999"></uni-icons></view>
            </view>
            <view class="icon">
              <image
                class="icon-img"
                :src="baseIconUrl + '/userIcon/icon_mine_member.png'"
              />
            </view>
          </view>
          <view class="line"></view>
          <view class="common-item" @click="toVip">
            <view class="left-info">
              <view class="common-title">VIP服务</view>
              <view class="more-btn">购买专属服务<uni-icons type="right" size="12" color="#999"></uni-icons></view>
            </view>
            <view class="icon">
              <image
                class="icon-img"
                :src="baseIconUrl + '/userIcon/icon_mine_custom_vip.png'"
              />
            </view>
          </view>
        </view>
        <view class="order-box">
          <view class="order-title">
            <view class="title">我的订单</view>
            <view class="view-all" @click="checkAll">查看全部<uni-icons type="right" size="14" color="#999"></uni-icons></view>
          </view>
          <view class="order-operate">
            <view class="operate-item" v-for="(item, index) in orderConfig" :key="index" @click="clickCellItem(item)">
              <view class="operate-icon">
                <image class="operate-img" :src="`${baseIconUrl}/userIcon/${item.icon}`" />
              </view>
              <view class="text">{{ item.text }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="cell-box">
        <view class="cell-item" v-for="(item, index) in cellConfig" :key="index" @click="clickCellItem(item)">
          <view class="label">{{ item.label }}</view>
          <view class="value">
            {{ cellData[item.key] }}
            <uni-icons class="arrow-icon" type="right" color="#999" size="14"></uni-icons>
          </view>
        </view>
      </view>
      <view class="setting-item" @click="clickSetting">
        <view class="label">设置</view>
        <view class="value">
          <uni-icons class="arrow-icon" type="right" color="#999" size="14"></uni-icons>
        </view>
      </view>
    </scroll-view>
    <view class="custom-service" @click="clickCustom">
      <image
        class="custom-img"
        :src="baseIconUrl + '/commonIcon/icon_custom_service.png'"
        mode="aspectToFill"
      />
    </view>
    <you-popup
      :popupVisible="editDialog"
      popupType="bottom"
      dialogWidth="100%"
      popupTitle="编辑资料"
	    @popupClose="editDialog = false"
      @cancel="clickCancelEdit"
      @confirm="clickConfirmEdit"
    >
      <template #popupContent>
        <view class="edit-form">
          <you-form
            v-if="editDialog"
            ref="form"
            :showFormTitle="false"
            :formConfig="userInfoConfig"
            v-model="userInfoForm"
          ></you-form>
        </view>
      </template>
    </you-popup>
    <tab-bar :selectedIndex="2"></tab-bar>
  </view>
</template>

<script>
  import { baseImgUrl, baseIconUrl, baseUrl } from '@/config'
  import api_physician from '@/api/physician'
  import api_login from '@/api/login'
  export default {
    name: 'PhysicianMine',
    data() {
      return {
        baseUrl,
        baseImgUrl,
        baseIconUrl,
        scrollHeight: '',
        userInfo: {},
        orderConfig: [
          { text: '普通订单', icon: 'icon_mine_order.png', funcName: 'checkAll' },
          { text: '普通会员订单', icon: 'icon_mine_wait.png', funcName: 'commonClick'},
          { text: 'VIP专属定制', icon: 'icon_mine_vip.png', funcName: 'vipClick' },
        ],
        cellConfig: [
          { label: '我的评估报告', key: 'report', funcName: 'clickMyReport' },
          { label: '我的训练计划', key: 'planNum', funcName: 'clickMyPlan' },
          { label: '我的收藏', key: 'collection', funcName: 'clickMyCollect' }
        ],
        cellData: {
          planNum: '',
          report: '',
          collection: ''
        },
        editDialog: false,
        userInfoConfig: [
          {
            type: 'input',
            label: '用户名称',
            key: 'userName'
          },
          {
            type: 'imgUpload',
            label: '用户头像',
            key: 'userPhoto',
            limit: 1
          }
        ],
        userInfoForm: {}
      }
    },
    onShow() {
      uni.hideTabBar()
      this.userInfo = uni.getStorageSync('allUserInfo')
      this.scrollHeight = this.$store.getters.heightData.mainHeight - 10 + 'px'
      uni.setStorageSync('saveVideoList', null)
      uni.setStorageSync('videoScrollTop', 0)
      uni.setStorageSync('videoPageNum', 1)
    },
    methods: {
      clickEditInfo() {
        if (!this.userInfo) {
          uni.reLaunch({ url: '/subPages/home/login' })
          return
        }
        this.userInfoForm = {
          userName: this.userInfo.userName,
          userPhoto: this.userInfo.userPhoto.includes('http') ? this.userInfo.userPhoto : this.baseUrl + this.userInfo.userPhoto
        }
        this.editDialog = true
      },
      clickCancelEdit() {
        this.userInfoForm = {}
        this.editDialog = false
      },
      clickConfirmEdit() {
        const params = {
          id: this.userInfo.id,
          ...this.userInfoForm
        }
        api_physician.updateUserInfo(params).then(res => {
          if (res.code !== 200) return
          uni.showToast({
            title: '修改成功',
            icon: 'success',
            mask: true
          })
          this.editDialog = false
          api_login.fetchUserInfo().then(res => {
            if (res.code !== 200) return
            const userInfo = {
              baUserId: res.baUser.id,
              ...res.baUser
            }
            uni.setStorageSync('allUserInfo', userInfo)
            this.userInfo = uni.getStorageSync('allUserInfo')
          })
        })
      },
      clickOrdinary() {},
      // 跳转到普通会员订单列表
      commonClick(){
        uni.navigateTo({ url: '/subPages/userMine/memberBenefits/regularMember' })
      },
      // 跳转到会员权益列表普通用户
      memberClick() {
        uni.navigateTo({ url: '/subPages/userIndex/memberCenter/activateMember?activeCard=1' })
      },
      // 跳转到我预约的项目列表
      toVip() {
        uni.navigateTo({ url: '/subPages/userMine/memberBenefits/customServeList' })
      },
      // 跳转到VIP专属定制列表
      vipClick() {
        uni.navigateTo({ url: '/subPages/userMine/memberBenefits/exclusiveCustomization' })
      },
      // 点击查看全部跳转我的订单
      checkAll() {
        uni.navigateTo({ url: '/subPages/userMine/myOrder/orderList' })
      },
      clickCellItem(item) {
        this[item.funcName]()
      },
      //跳转到训练计划
      clickMyPlan() {
        // uni.navigateTo({
        //   url: '/subPages/userMine/myPlan/myPlanList'
        // })
        uni.switchTab({
          url: '/pages/userTrainPlan'
        })
      },
      clickMyReport() {
        uni.navigateTo({
          url: '/subPages/userMine/myAssessmentReport/myReportList'
        })
      },
      clickMyCollect() {
        uni.navigateTo({
          url: '/subPages/userMine/myCollect/myCollectList'
        })
      },
      clickSetting() {
        uni.navigateTo({
          url: '/subPages/commonPage/settingPage/index'
        })
      },
      clickCustom() {
        uni.navigateTo({ url: '/subPages/userIndex/freeScreening/index?title=在线客服' })
      }
    }
  }
</script>
<style lang="scss">
  .top-info {
    padding: 50rpx 30rpx 0;
    background: linear-gradient(to bottom, #5992e3, transparent);
    .info-box {
      display: flex;
      align-items: center;
      .user-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        overflow: hidden;
        .head-img {
          width: 100%;
          height: 100%;
        }
      }
      .user-info {
        flex: 1;
        margin: 0 30rpx;
        .name-box {
          display: flex;
          align-items: center;
          margin-bottom: 20rpx;
          .user-name {
            margin-right: 10rpx;
            font-size: 36rpx;
            font-weight: 500;
            color: #FFF;
          }
          .identity {
            max-width: 140rpx;
            margin-left: 6rpx;
            .identity-img {
              height: 40rpx;
            }
          }
        }
        .user-id {
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .edit-btn {
        color: rgba(255, 255, 255, .7);
      }
    }
    .vip-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 50rpx 0 30rpx;
      border-radius: 16rpx;
      background-color: #FFF;
      .line {
        width: 2rpx;
        height: 60rpx;
        background-color: #EEE;
      }
      .common-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 36rpx 30rpx 30rpx;
        width: 50%;
        .left-info {
          .common-title {
            margin-bottom: 10rpx;
            font-size: 32rpx;
            font-weight: 500;
          }
          .more-btn {
            font-size: 24rpx;
            color: #999;
          }
        }
        .icon {
          width: 84rpx;
          height: 84rpx;
          .icon-img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .order-box {
      border-radius: 16rpx;
      background-color: #FFF;
      .order-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 38rpx 30rpx;
        .title {
          font-size: 28rpx;
          font-weight: 500;
        }
        .view-all {
          display: flex;
          align-items: center;
          color: #999;
        }
      }
      .order-operate {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .operate-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 14rpx 0 30rpx;
          .operate-icon {
            width: 64rpx;
            height: 64rpx;
            margin-bottom: 14rpx;
            .operate-img {
              width: 100%;
              height: 100%;
            }
          }
          .text {
            color: #676767;
          }
        }
      }
    }
  }
  .cell-box {
    margin: 28rpx 30rpx 30rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .cell-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 40rpx 30rpx;
      .label {
        font-weight: 500;
      }
      .value {
        color: #999;
      }
    }
  }
  .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 16rpx;
    padding: 40rpx 30rpx;
    margin: 0 30rpx;
    background-color: #FFF;
    .label {
        font-weight: 500;
      }
  }
  .custom-service {
    width: 96rpx;
    height: 96rpx;
    position: fixed;
    bottom: 270rpx;
    right: 16rpx;
    z-index: 9999;
    .custom-img {
      width: 100%;
      height: 100%;
    }
  }
  .edit-form {
    padding: 0 60rpx 10rpx;
  }
</style>